<template>  
	<div>
		<div class="medical-report" id="main" ref="watermarkContainer">
			<div style=" float: right;margin-top: -10px;height: 40px"> 
				<barcode class="barcode" :value="barcodeValue" format="code128" :width="1.5" :height="40" >
					条形码显示失败时的内容
				</barcode>
			</div>
			<h2 style="margin-left: 12%">体检导单</h2>  
			<hr>
			<div>
				<table>
				<tr>
					<th>导检号</th>
					<th>登记日期</th>
					
				</tr>
				<tr>
					<td>{{ barcodeValue }}</td>
					<td>{{guidanceSheet.orderCreateTime}}</td>
				</tr>
				</table>
			</div>
			<hr>
			<div class="tishi">
				温馨提示：
				<br>
				1.抽血后请按压5分钟
				<br>
				2.妇科B超请先胀尿
				<br>
				3.请勿做x线检查或者其它放射性检查
				<br>
				4.未婚女性勿做妇检、TCT
			</div>
			<hr>
		<table>  
			<thead>  
			<tr>  
				<th>科室</th> 
				<th>项目/套餐</th>  
				<th>费用（元）</th>
				<th>签名</th>  
			</tr>  
			</thead>  
			<tbody>  
				<tr v-for="(item,index) in this.project.length" :key="index">  
					<td> {{ departName[index] }}</td>  
					<td> {{ project[index] }}</td>  
					<td>{{ projectPrice[index] }}</td>  
					<td></td>
				</tr>  
				<tr >  
					<td style="text-align: right" colspan="4">合计: {{ total }} 元</td>  
				</tr>
			</tbody>  
		</table>  
		<div class="deal">处理人：{{ name }}</div>
		</div>  
	</div>
	
</template>  
<script>  
// 引入VueBarcode组件  
import VueBarcode from 'vue-barcode';  
export default {  
	data(){
		return{
			// 初始条形码数据为空  
			// 初始时随机生成条形码的值  
			barcodeValue: "",
			guidanceSheet:{},
			//来存项目名称
			project:[],
			//来存项目价格
			projectPrice:[],
			//来存科室名
			departName:[],
			//计算总价格
			total:0,
			//获取当前是套餐还是项目
			proOrCom:1,
			//处理人名称
			name:"",
		}
	}, 
	components: {  
		// 注册VueBarcode组件  
		barcode: VueBarcode  
	},
	
	methods:{
		generateBarcode() {  
			this.barcodeValue = this.guidanceSheet.orderExaminationId;  
		},
		getInfo(){
			//根据名称来请求获取价格
			this.project = this.guidanceSheet.orderInfo.split(",")
			for(var i = 0; i<this.project.length;i++){
				let params = "" + this.project[i]
				//获取价格
				//得先要判断是获取项目得价格还是套餐的价格，将状态值传入过去
				this.$axios.get(
					'/order/getProjectPrice',
					{
						params:{
							status:this.proOrCom,
							name:params
						}
					}
				).then(res=>{
					if(res != undefined){
						this.total = this.total + res.data
						this.projectPrice.push(res.data)
					}
				})
				//获取科室昵称
				this.$axios.get(
					'/order/getDepartName',
					{
						params:{
							status:this.proOrCom,
							name:params
						}
					}
				).then(res=>{
					if(res != undefined){
						this.departName.push(res.data)
					}
				})
			}
			
		},  
		addWatermark() {  
			const container = this.$refs.watermarkContainer;  
			const watermark = document.createElement('div');  
			watermark.style.position = 'absolute';  
			watermark.style.top = '50%';  
			watermark.style.left = '50%';  
			watermark.style.transform = 'translate(-50%, -50%) rotate(30deg)';  
			watermark.style.color = 'rgba(0, 0, 0, 0.3)';  
			watermark.style.fontSize = '50px';  
			watermark.style.width = '100%';  
			watermark.style.textAlign = 'center';  
			watermark.style.pointerEvents = 'none';  
			watermark.textContent = '检导单打印请到收费处打印';  
			container.appendChild(watermark);  
   	 	},
		dealName(){
			this.$axios.get(
				'/order/dealName',
				{
					params:{
						id:this.guidanceSheet.orderId
					}
				}
			).then(res =>{
				if(res != undefined){
					console.log("dealName",res)
					this.name = res.data
				}
			})
		}
		
	},
	
	mounted() {  
		//从本地储存里面获取原来检导单上的一整条数据，并解析出来
		this.guidanceSheet = JSON.parse(localStorage.getItem("guidanceSheet"));
		// 组件挂载后立即生成一个条形码  
    	this.generateBarcode(); 
		//获取状态
		this.proOrCom = this.guidanceSheet.orderProOrCom;
		//调用获取每一项价格的方；
		this.getInfo();
		// 添加水印
		this.addWatermark();  
		//获取处理人的姓名
		this.dealName()
  	}
}  
</script>  

<style scoped>  
body{
	margin:auto;
}
.medical-report {  
	width: 100%;  
	max-width: 800px;  
	margin: 0 auto;  
	padding: 20px;  
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
	position: relative; 
}  

table {  
	width: 100%;  
	border-collapse: collapse;  
	margin-bottom: 20px;  
}  

th, td {  
	border: 1px solid #ccc;  
	padding: 8px;  
	text-align: left;  
}  

th {  
	background-color: #f2f2f2;  
}  

.patient-info p {  
	margin-bottom: 5px;  
}  

.patient-info strong {  
	font-weight: bold;  
	color: #333;  
}  
hr{
	border: 1px solid #000;
}
.tishi{
	text-align: left;
	color:#525151
}
.deal{
	float: left;
}
</style>